<template>
  <div class="home">
    <div class="login-form">
      <el-form onsubmit="return false">
        <render></render>
        <el-form-item label="账号">
          <el-input v-model="username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="password" type="password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="">
          <div style="text-align:right;width: 100%;">
            <el-button type="primary" @click="doLogin"> 登录 </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="tsx">
import { ElMessage } from 'element-plus';
import { Component, Vue, toNative } from 'vue-facing-decorator'

import render from '../components/Comp.render'

@Component({
  components: {
    render
  }
})
class LoginHome extends Vue {
  username = ''

  password = ''

  MyRender() {
    return <div>1</div>
  }

  doLogin(): void {
    ElMessage({
      message: '登录成功',
      type: 'success',
      onClose: () => {
        location.href = process.env.publicPath + 'index.html'
        sessionStorage.setItem('Token', 'Token')
      },
    })
  }
}
export default toNative(LoginHome)
</script>
<style lang="scss" scoped>
$width: 360;
$height: 250;

.home {
  width: 100%;
  height: 100%;
  position: relative;
}

.login-form {
  box-sizing: border-box;
  padding: 50px;
  width: $width + px;
  height: $height + px;
  position: absolute;
  top: 50%;
  margin-top: - ($width / 2) + px;
  left: 50%;
  margin-left: - ($height) + px;
  box-shadow: var(--el-box-shadow-lighter);
}
</style>
